<template>
  <div class="containers">
    <div class="container">
      <div style="margin-bottom: 10px;display: flex;justify-content: space-between;max-width: 900px;">
        <el-button type="primary" icon="el-icon-plus" @click="addCustomer" size="mini">添加客服</el-button>
        <el-button type="primary" @click="saveCustomers()" size="mini">保 存</el-button>
      </div>
      <div class="form-box" style="width: 100%;max-width: 900px;">
        <el-table :data="customers"  border size="mini">
            <el-table-column label="头像" width="80" align="center">
              <template slot-scope="scope">
                <el-upload
                  class="avatar-uploader"
                  :action="upload + '/'"
                  :show-file-list="false"
                  :data="upimg"
                  :on-success="(res, file) => handleAvatarSuccess(res, file, scope.$index)"
                  :before-upload="(file) => beforeUpload(file, scope.$index)">
                  <img v-if="scope.row.img" :src="scope.row.img" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </template>
            </el-table-column>

            <el-table-column label="名字" width="150">
              <template slot-scope="scope">
                <el-input v-model="scope.row.name" placeholder="请输入客服名字" size="mini"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="链接" >
              <template slot-scope="scope">
                <el-input v-model="scope.row.url" placeholder="请输入客服链接" size="mini"></el-input>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button type="danger" icon="el-icon-delete" circle @click="removeCustomer(scope.$index)" size="mini"></el-button>
              </template>
            </el-table-column>
          </el-table>


      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customers: [
        {
          name: '',
          url: '',
          img: ''
        }
      ],
      upimg: {
        token: '',
        key: new Date().valueOf()
      },
      upload: '',
      url: '',
    };
  },

  created() {
    this.getToken().then(res => {
          this.upimg.token = res.data.token;
          this.url = res.data.url;
          this.upload = res.data.upload;
          console.log(res);
      },
      function () {
        console.log('请求失败处理');
      }
    );
    this.load(); //获取
  },

  methods: {
    // 添加客服
    addCustomer() {
      this.customers.push({
        name: '',
        url: '',
        img: ''
      });
    },

    // 删除客服
    removeCustomer(index) {
      if (this.customers.length <= 1) {
        this.$message.warning('至少保留一个客服');
        return;
      }
      this.customers.splice(index, 1);
    },

    // 上传图片
    handleAvatarSuccess(res, file, index) {
      this.$set(this.customers[index], 'img', this.url + res.key);
    },

    beforeUpload(file, index) {
      if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        this.$message.error('上传头像图片只能是 JPG、PNG 格式!');
        return false;
      }
      if (file.size / 1024 / 1024 > 1) {
        this.$message.error('上传图标大小不能超过 1M!');
        return false;
      }
      let types = file.name.split('.'); //获取图片格式
      this.upimg.key = this.$template + '/home/' + new Date().valueOf() + '.' + types[types.length-1];
      return true;
    },

    load() {
      this.request('admin/customerSet/', 'get', {code: 0}).then(
        res => {
          if (res.errno == 0) {
            if (res.data && Array.isArray(res.data.customer) && res.data.customer.length > 0) {
              this.customers = res.data.customer;
            } else {
              // 如果没有数据，保持初始的一个空客服
              this.customers = [{
                name: '',
                url: '',
                img: ''
              }];
            }
          }
        },
        function () {
          console.log('请求失败处理');
        }
      );
    },

    saveCustomers() {
      // 验证数据
      let valid = true;
      for (let i = 0; i < this.customers.length; i++) {
        const customer = this.customers[i];
        if (!customer.name || !customer.url) {
          valid = false;
          break;
        }
      }

      if (!valid) {
        this.$message.error('请填写完整所有客服的名字和链接');
        return;
      }

      // 包装在customer数组中发送给后台
      const data = {
        customer: this.customers
      };

      this.request('admin/customerSet/', 'post', data).then(
        res => {
          this.$message.success(res.errmsg);
        },
        function () {
          console.log('请求失败处理');
        }
      );
    }
  }
};
</script>

<style scoped="scoped">
.container {
  padding: 20px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 50px;
  height: 50px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.avatar {
  width: 50px;
  height: 50px;
  display: block;
  object-fit: cover;
}

.table-cell-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}
</style>
